<template>
    <div class="login-page">
        <div class="picture"></div>
        <el-card class="box-card">
            <!-- 头部区域 -->
           <template #header>
            <p>后台管理系统</p>
            <a href="#" @click.prevent="$router.push('/register')">去注册</a>
           </template>
           <!-- 表单区域 -->
            <el-form :model="form" :rules="rules" ref="form">
                <el-form-item label="用户名" prop="username">
                    <el-input placeholder="请输入用户名" v-model="form.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input placeholder="请输入密码" type="password" v-model="form.password"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="submit">登录</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
export default {
  name: 'LoginIndex',
  data () {
    return {
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: ['blur', 'change'] },
          { min: 1, max: 10, message: '长度在 1~10 个字符', trigger: ['blur', 'change'] }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: ['blur', 'change'] },
          { pattern: /^\w{6,15}$/, message: '长度在 6~15 个字符', trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  methods: {
    async submit () {
      try {
        // 校验表单内容是否合规
        await this.$refs.form.validate()

        // 调用仓库的loginAction进行调用登录接口
        await this.$store.dispatch('user/loginAction', this.form)
        // console.log(res)
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: url(@/assets/images/登录注册bg@2x.png) no-repeat center / cover;
    .picture {
        position: fixed;
        left: 50px;
        top: 30px;
        width: 120px;
        height: 50px;
        background: url(@/assets/images/登录页logo.png) no-repeat center / cover #fff;
    }
    .box-card {
        width: 540px;
        height: 464px;
        text-align: center;
        background: #FFFFFF;
        box-shadow: 0px 0px 28px 0px rgba(21,43,99,0.08);
        border-radius: 8px;
        ::v-deep .el-card__header {
            border-bottom: none;
            p {
                margin-top: 30px;
                margin-bottom: 8px;
                font-size: 32px;
            }
            a {
                font-size: 16px;
                text-decoration: none;
                color: #1E5EFF;
            }
            a:hover {
                color: #4F81FF;
            }
        }
        ::v-deep .el-form-item__label {
            margin-left: 40px;
            height: 20px;
            line-height: 20px;
            font-size: 14px;
            color: #5A607F;
        }
        ::v-deep .el-form-item__content {
            margin-bottom: 12px;
        }
        ::v-deep .el-input__inner {
            width: 420px;
            height: 48px;
            font-size: 16px;
            color: #A1A7C4;
        }
        ::v-deep .el-form-item__error {
            margin-left: 40px;
        }
        ::v-deep .el-button {
            width: 420px;
            height: 48px;
            font-size: 16px;
            background-color: #1E5EFF;
            color: #fff
        }
        ::v-deep .el-button:hover {
            background-color: #4F81FF;
        }
    }
}
</style>
